<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
    <form action="" onclick="return false;">
        <div>
            用户名：<input type="text" name="username" id="username" placeholder="用户名">
        </div>
        <div>
            密码：<input type="password" name="password" id="password" placeholder="密码">
        </div>
        <div>
            <input type="submit" id="submit">
            <input type="reset" id="submit">
        </div>
    </form>
</body>
<script>
var submit = document.getElementById('submit');
console.log(submit);
submit.onclick = function(){
    var username = document.getElementById('username').value;
    console.log(username);
    var password = document.getElementById('password').value;
    console.log(password);
    if(username == '' || password == ''){
        alert('用户或密码不能为空！');
    }else{
        if(username == 'james' && password == '123456'){
            alert('登录成功！');
            window.location.href = 'https://www.baidu.com/';
        }else{
            alert('用户或密码错误！');
        }
    }
}
var username = document.getElementById('username');
username.onfocus = function(){
    // alert('选中用户名');
}
username.onblur = function(){
    alert('离开用户名');
}
</script>
</html>